<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gestionnaire Alchimiste</title>
<!--
/**
 * CMS - jQuery plugin 
 *
 * Copyright (c) 2011-2012 Benoit Racine, 2011 Alchimiste Musique et Web (QC/CAN)
 * http://code.google.com/p/the-alchimist-generator/
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */-->

 	<!--  <script src="http://code.jquery.com/jquery-1.4.4.js"></script> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  	<script type="text/javascript" src="gestionnaire/gestionWswgBD.js"></script>
	<script type="text/javascript" src="gestionnaire/rigthClick/vscontext.jquery.js"></script>
    <script type="text/javascript" src="gestionnaire/coding.js"></script>
    <script type="text/javascript" src="gestionnaire/jquery.tools.min.js"></script>
	<script type="text/javascript" src="gestionnaire/jwysiwyg/jquery.wysiwyg.js"></script>
    <script type="text/javascript" src="gestionnaire/jqdialog/jqdialog.js"></script>
        <link rel='stylesheet' href='css/style.css' />
            <!--[if IE]>
            <link rel="stylesheet" href="css/ie_style.css" />
            <![endif]-->    
        <link rel='stylesheet' href='gestionnaire/rigthClick/css/vscontext.css' />
    	<link rel="stylesheet" href="gestionnaire/jwysiwyg/jquery.wysiwyg.css" type="text/css" />
    	<link rel="stylesheet" href="gestionnaire/jqdialog/jqdialog.css" type="text/css" />
    
	<script type="text/javascript">
	var allowedit = false;
	var id = "";
	var newId = "";
	var tmpId = "";
	var sec = "";
	var pos = "";
	var lng = "";
	var nbr = "";
	var arrLng = ["eng", "frn"];
	var url = "";
	var contenu = "";
	var res = "";
	var phpData = "";
	var msgBD = "";
	var pw = "";
	
	$(function() {
		recupSite();
		anime();
		cld();
		diapo();
		changerPho();
		$("img[title]").tooltip();// {offset:[23, 0]}
	});
	
	function menu(){
		$(".menu").click(function(){
			id = $(this).attr("id");
			sec = "sec" +id.substring(id.indexOf("-")+1, id.lastIndexOf("-"));			
			if($("#menu").data("menu")!=sec){
				$(".menu").css("font-weight","normal");
				$("#"+id).css("font-weight","bold");
				$(".hide").hide();
				$("#"+sec).show();
				$("#menu").data("menu", sec);
			}
		});
	}
	
	function anime(){
		$("#diapo_1-0").delay(3000).fadeOut("slow", function(){ $("#diapo_1-0").append($("#diapo_1-0 > div:first")).fadeIn("slow",  function(){ anime(); }); });
	}
	
	function menuContact(obj){
		id = $(obj).attr("id");
		newId = "sousM"+ id.substr(1);
		$(".sousContactMenu").hide();
		$("#sousMenuTtr").html($("#"+id).html());
		if(document.getElementById(newId)==null){ 
			$("#"+ newId.substring(0, newId.indexOf("-")+1) +"1").clone().attr("id", newId).html("text modifiable").appendTo("#sousMenu");
		} 
		$("#"+ newId).show("fast").stop(true,true);
		$("#sousMenu").show("fast").stop(true,true);
		$("#contactMenu").mouseleave(function(){ $("#sousMenu").hide(); }).stop(true,true);
	}
	
	function cld(){
		$("#cld").click(function(){
			$("#contentOvr").html($("#cldOvr")).show("fast");
			$('html, body').animate({scrollTop: '0px'}, 800);
			fermerCld();
		});
	}
	
	function fermerCld(){
		$("#fermerCld").click(function(){
			$("#gestion").append($("#cldOvr"));
			$("#overshadow").hide("fast");
		});
	}
	
	function diapo(){
		$(".phoOvr").click(function(){
			id = "#"+ $(this).attr("id").substring(0, $(this).attr("id").indexOf("-"));
			$("#contentOvr").html($(id)).prepend($("#phoButton"));
			$("#overshadow").show("fast");
			$("#phoButton").data("pho", id);
		});
	}
	
	function changerPho(){
		$(".phoButton").click(function(){
			id = $(this).attr("id");
			newId = $("#phoButton").data("pho");
			if(id == "prec"){ $(newId).prepend($(newId +" > div:last")); }
			else if(id == "suiv"){ $(newId).append($(newId +" > div:first")); }
			else {
				$("#overshadow").hide("fast");
				$("#gestion").append($("#phoButton")).append($(newId));
			}
		});
	}
	
	function frmOvr(){
		id = $("#contentOvr").data("id");
		if(id = "pho_1"){ $("#gestion").append }
		$("#gestion").append($(id));
		$("#overshadow, #uploadImg").hide();
	}
	
	function chgLng(list){
		lng = $("#menu").data("lng");
		sec = $("#menu").data("menu");
		url = location.href.substring(0, location.href.indexOf('#'));
		$("."+ lng).hide();
		lng = list.options[list.selectedIndex].value;
		$("#menu").data("lng", lng);
		$("."+ lng).show();
		location.replace(url +"#bk-"+ sec.substr(3) +"-"+ lng);
	}
	</script>
    </head>
    <body>
        <div id="haut">
       	  <div class="frn">
            	Exemple de site utilisant notre gestionnaire
        	</div>
        	<div class="eng">
            	Site example using our management system
            </div>
        </div>
        <div id="menu">
            <div class="frn">
                <a id="menu-1-frn" href="#bk1-frn" class="menu">Texte</a>
                <a id="menu-2-frn" href="#bk2-frn" class="menu">Image</a>
                <a id="menu-3-frn" href="#bk3-frn" class="menu">Video</a>
                <a id="menu-4-frn" href="#bk4-frn" class="menu">Google</a>
                <a id="menu-5-frn" href="#bk5-frn" class="menu">Contactez-nous</a>
            </div>
            <div class="eng">
                <a id="menu-1-eng" href="#bk1-eng" class="menu">Text</a>
                <a id="menu-2-eng" href="#bk2-eng" class="menu">Picture</a>
                <a id="menu-3-eng" href="#bk3-eng" class="menu">Image</a>
                <a id="menu-4-eng" href="#bk4-eng" class="menu">Google</a>
                <a id="menu-5-eng" href="#bk5-eng" class="menu">Contact-us</a>
            </div>
        </div>	
        <div id="milieu">
            <div id="sec1" class="hide">
                <div>
                  <div id="txtOvr_frn-1" class="frn wswg-grp">Texte modifiable dans l'overshadow</div>
                  <div id="txtIns_frn-1" class="frn wswg-grp wswgIns">Text modifiable directement dans la section</div>
                  <div id="txtOvr_eng-1" class="eng wswg-grp">Modifiable text in the overshadow</div>
                  <div id="txtIns_eng-1" class="eng wswg-grp wswgIns">Modifiable text directly in this section</div>
                </div>
          		<div id="contactMenu">
                	<div>
                        <div id="menuTtr_frn-1" class="frn ttr">Menu flottant</div>
                        <div id="menu_frn-1" onmouseover="menuContact(this)" class="frn wswg-grp">Exemple menu 1</div>
                        <div id="menu_frn-2" onmouseover="menuContact(this)" class="frn wswg-grp">Exemple menu 2</div>
                        <div id="menuTtr_eng-1" class="eng ttr">Hovering Menu</div>
                        <div id="menu_eng-1" onmouseover="menuContact(this)" class="eng wswg-grp">Menu example 1</div>
                        <div id="menu_eng-2" onmouseover="menuContact(this)" class="eng wswg-grp">Menu example 2</div>
                    </div>
                   	<div id="sousMenu" class="hide">
                   		<div id="sousMenuTtr" class="ttr"></div>
                        <div id="sousMenu_frn-1" class="frn wswg-grp sousContactMenu">Texte modifiable 1</div>
                        <div id="sousMenu_frn-2" class="frn wswg-grp sousContactMenu">Texte modifiable 2</div>
                        <div id="sousMenu_eng-1" class="eng wswg-grp sousContactMenu">Modifiable text 1</div>
                        <div id="sousMenu_eng-2" class="eng wswg-grp sousContactMenu">Modifiable text 2</div>                     
                    </div>
       	  		</div>
            </div>
            <div id="sec2" class="hide">
                <div id="diapo_1-0" class="wswg-grp phoUpl">
                    <div id="diapo_1-1" class="wswg-grp phoUpl">
                        <img src="img/ajoutPhoto.gif" title="diapo 1" width="200" height="200" />
                    </div>
                    <div id="diapo_1-2" class="wswg-grp phoUpl">
                        <img src="img/ajoutPhoto2.gif" title="diapo 2" width="200" height="200" />
                    </div>
                </div>
                <div id="diapoOvr">
                	<div class="frn txtPho">
                		cliquer sur la photo pour voir les autres.
                    </div>
                    <div class="eng txtPho">
                		click on this photo to see more
                    </div>
                	<div id="pho_1-0" class="phoOvr wswg-grp phoUpl">
                    	<img src="img/ajoutPhoto2.gif" title="Cliquer sur la photo pour les autres" width="200" height="200" />
                    </div>
                </div>
                <div id="exImg" class="wswg-grp phoUpl">
                    <img src="img/ajoutPhoto.gif" title="photo normale" width="200" height="200" />
                </div>
            </div>
            <div id="sec3" class="hide">
            	<div id="vid-1" class="wswg-grp vidUpl">
                	<iframe width="560" height="349" src="http://www.youtube.com/embed/oU_C9t1Fyn0?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div id="sec4" class="hide">
                <button id="cld" type="button">
                	<iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=295&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=alchimiste.web%40gmail.com&amp;color=%23182C57&amp;ctz=America%2FMontreal" style=" border-width:0 " width="390" height="295" frameborder="0" scrolling="no"></iframe>
                </button>
                <div id="map">
                	<iframe width="390" height="295" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=st-eugene-de-guigues&amp;aq=&amp;sll=45.512064,-73.604664&amp;sspn=0.06989,0.158443&amp;ie=UTF8&amp;hq=&amp;hnear=Saint-Eug%C3%A8ne-de-Guigues,+T%C3%A9miscamingue,+Quebec&amp;ll=47.511925,-79.351759&amp;spn=0.017102,0.033388&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=st-eugene-de-guigues&amp;aq=&amp;sll=45.512064,-73.604664&amp;sspn=0.06989,0.158443&amp;ie=UTF8&amp;hq=&amp;hnear=Saint-Eug%C3%A8ne-de-Guigues,+T%C3%A9miscamingue,+Quebec&amp;ll=47.511925,-79.351759&amp;spn=0.017102,0.033388&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
                </div>
            </div>
            <div id="sec5" class="hide">
            	<div id="contactFrn" class="frn"><a href="mailto:alchjimiste.web@gmail.com">Pour nous contacter</a></div>
                <div id="contactEng" class="eng"><a href="mailto:alchjimiste.web@gmail.com">To contact us</a></div>
            </div>
        </div>
        
        <div id="footer">
            <div id="traduc">
            	Langage, Language
               	<form>
                	<select name="lng" onchange="chgLng(this.form.lng);">
                        <option value="frn" selected="selected">Français</option>
                        <option value="eng">English</option>
                    </select>
                </form>
            </div>
            <div id="login" class="hide">          
                <form name="loginform" onsubmit="validate(); return false;" action="#">
                        <input type="password" name="pword" />
                        <input type="submit" value="Admin" />
                </form>
            </div>
            <a id="show-Login">Zone client</a>
            <div id="copyright">Conception L'Alchimiste Musique et Web - Tous Droits réservés</div>
            
            <div class="vs-context-menu hide">
                <ul>
                	<li class="copy seprator"><a id="menu_1">Ajouter</a></li>
                    <li class="delete seprator"><a id="menu_2">Delete</a></li>
                    <li class="edit"><a id="menu_3">Modifier</a></li>
                </ul>
            </div>
        </div>
        <div class="hide" id="overshadow">
        	<div id="butX" onclick="frmOvr()"><img src="img/x.png" width="42" height="42" /></div>
            <div id="contentOvr"></div>
        </div>
        
        <div id="gestion" class="hide"> 
        	<div class="wswg" id="wswg">
                <textarea class="wysiwyg" name="wysiwyg" id="wysiwyg" rows="5" cols="2"></textarea>
            </div>
            <div id="cldOvr">
            
                <div>
                    <button id="fermerCld" type="button">Fermer</button>
                </div>
                <div>
                    <iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=alchimiste.web%40gmail.com&amp;color=%23182C57&amp;ctz=America%2FMontreal" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
            	</div>
            </div>
            <div id="phoOvr">
                <div id="phoButton">
                    <div id="prec" class="phoButton"><img src="img/phoGauche.png" title="precedant" width="18" height="24" /></div>
                    <div id="fermerPho" class="phoButton"><img src="img/phoX.png" title="fermer" width="25" height="24" /></div>
                    <div id="suiv" class="phoButton"><img src="img/phoDroit.png" title="suivant" width="18" height="24" /></div>
                </div>
                <div id="pho_1">
                    <div id="pho_1-1" class="wswg-grp phoUpl">
                        <img src="img/ajoutPhoto.gif" title="gal 1" width="200" height="200" />
                    </div>
                    <div id="pho_1-2" class="wswg-grp phoUpl">
                        <img src="img/ajoutPhoto2.gif" title="gal 2" width="200" height="200" />
                    </div>
                    <div id="pho_1-3" class="wswg-grp phoUpl">
                        <img src="asset/ajoutPhoto3.gif" title="gal 3" width="200" height="200" />
                    </div>
                    <div id="pho_1-4" class="wswg-grp phoUpl">
                        <img src="asset/ajoutPhoto4.gif" title="gal 4" width="200" height="200" />
                    </div>
                </div>
            </div>
        </div>
        <div id="uploadImg" class="hide">
            <form id="uploadform" action="gestionnaire/upload_img.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploadimg(this); return false">
                <input type="file" id="myfile" name="myfile" />
                <input type="submit" value="Submit" />
            </form>
            <iframe id="uploadframe" class="hide" name="uploadframe" src="gestionnaire/upload_img.php"></iframe>
        </div>
    </body>
</html>